{% extends "menu.html" %}

{% block title %}login{% endblock %}

{% block content %}
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
        <div class="w-full max-w-sm p-8 bg-white rounded-lg shadow-md">
            <h2 class="text-2xl font-bold mb-6 text-center">登录</h2>
            <form id="login-form">
                <div class="mb-4">
                    <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input type="email" id="email" name="email" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    <input type="password" id="password" name="password" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>
                <button type="submit"
                        class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                    登录
                </button>
                <p class="mt-4 text-sm text-center">
                    No account yet? <a href="/register" class="text-indigo-600 hover:text-indigo-900"> register</a>
                </p>
            </form>
            <p id="error-message" class="mt-4 text-red-500 text-sm text-center hidden">邮箱或密码错误</p>
        </div>
    </div>

    <script>
        document.getElementById('login-form').addEventListener('submit', async (event) => {
            event.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            try {
                const response = await fetch('/token', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({email, password})
                });

                if (!response.ok) {
                    throw new Error('Login failed');
                }

                const data = await response.json();
                // 登录成功，存储 Token
                localStorage.setItem('jwtToken', data.access_token);
                {##}
                {#console.log('Token stored:', data.access_token);#}
                console.log('Token stored in localStorage:', localStorage.getItem('jwtToken'));
                // 重定向到个人主页
                window.location.href = '/profile';
            } catch (error) {
                document.getElementById('error-message').classList.remove('hidden');
            }
        });
    </script>
    </body>
{% endblock %}
